<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合框</title>
    <link href="/themes/icon.css" rel="stylesheet" type="text/css" >
    <link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" >
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js"></script>
</head>
<body>

    单选:
    <select class="easyui-combobox">
        <option value="1">Java</option>
        <option value="2">php</option>
        <option value="3">python</option>
    </select>

    <br/>

    多选:
    <select class="easyui-combobox" data-options="multiple:true" style="width:100px;" >
        <option value="1">Java</option>
        <option value="2">php</option>
        <option value="3">python</option>
    </select>

    <br/>

    多行选择(多选的内容一行放不下，可以换一行继续放):
    <select class="easyui-combobox" data-options="multiline:true,multiple:true" style="width:100px;height: 50px;" >
        <option value="1">Java</option>
        <option value="2">php</option>
        <option value="3">python</option>
    </select>

    <br/>

    组合框组:
    <input id="group">

    <br/>

    页面加载事件加载数据
    <input id="group2" class="easyui-combobox" />
    <input type="button" value="加载" onclick="loadCombobox()" />

    <br/>

    加载远程数据:
    <input class="easyui-combobox" data-options="url:'combobox.json',method:'get',valueField:'id',textField:'name'"/>
    
    
    <br/>
    自定义样式:
    <input class="easyui-combobox" data-options="url:'combobox.json',method:'get',valueField:'id',textField:'name',formatter:formatItem,panelWidth:350,panelHeight:'auto'"/>

    <br/>


    缺少Commbobox JsonP调用示例:
    


    <script>

        function formatItem(row){
            return '<span style="color:#00ee00">'+row.name+"</span>,["+row.id+"]";
        }

        function loadCombobox(){

            $('#group2').combobox("loadData",[{
                    "value":"1",
                    "text":"firefox 2.0",
                    "group":"Firefox"
                },{
                    "value":"2",
                    "text":"firefox 1.5",
                    "group":"Firefox"
                },
                {
                    "value":"3",
                    "text":"ie 6.0",
                    "group":"IE"
                },
                {
                    "value":"4",
                    "text":"ie 7.0",
                    "group":"IE"
                }
            ]);

        }

        $(function(){

                //combobox:默认的valueField:value,valueText:text                
                var data=[{
                    "value":"1",
                    "text":"firefox 2.0",
                    "group":"Firefox"
                },{
                    "value":"2",
                    "text":"firefox 1.5",
                    "group":"Firefox"
                },
                {
                    "value":"3",
                    "text":"ie 6.0",
                    "group":"IE"
                },
                {
                    "value":"4",
                    "text":"ie 7.0",
                    "group":"IE"
                }
            ];

            $('#group').combobox({
                data:data,  //data:绑定数据
                groupField:"group",  //groupField:指定分组字段的名字
                icons:[{             //添加图标组
                    iconCls:'icon-add', 
                    handler:function(){
                        alert("add");
                    }
                }
                ,{
                    iconCls:'icon-edit',
                    handler:function(){
                        alert('edit');
                    }
                }
                ,{
                    iconCls:'icon-remove',
                    handler:function(){
                        alert('remove');
                    }
                }]
            });
        
        });
    </script>
</body>
</html>